<template>
    <a-modal width="400px" :visible="visible" @ok="handleOk" @cancel="handleCancel" :footer="null">
        <a-tabs v-model:activeKey="activeKey" centered>
            <a-tab-pane key="1" tab="短信登录" force-render>
                <a-form :model="formState" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }"
                    autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                    <a-form-item label="手机号" name="phone">
                        <a-input v-model:value="formState.phone" />
                    </a-form-item>

                    <a-form-item label="验证码" name="code">
                        <a-flex gap="small" justify="flex-start">
                            <a-input v-model:value="formState.code" />
                            <a-button :loading="smsCaptchaSending" type="default" @click="sendSmsCaptcha">获取验证码</a-button>
                        </a-flex>
                    </a-form-item>

                    <a-form-item :wrapper-col="{ span: 24 }">
                        <a-flex justify="center">
                            <a-button @click="smsLogin" :loading="smsLogging" type="primary" html-type="submit">登录/注册</a-button>
                        </a-flex>
                    </a-form-item>
                </a-form>
            </a-tab-pane>
            <a-tab-pane key="2" tab="密码登录">
                <a-form :model="formState" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }"
                    autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                    <a-form-item label="手机号" name="phone">
                        <a-input :disabled="passLogging" v-model:value="formState.phone" />
                    </a-form-item>


                    <a-form-item label="密码" name="password" style="text-align: right;">
                        <a-input-password :disabled="passLogging" v-model:value="formState.password" />
                        <a class="login-form-forgot" href="">忘记密码？</a>
                    </a-form-item>

                    <a-form-item :wrapper-col="{ span: 24 }">
                        <a-flex justify="center" align="center" gap="middle">
                            <a-button type="primary" @click="passwordLogin()" :loading="passLogging">登录</a-button>
                        </a-flex>
                    </a-form-item>

                </a-form>
            </a-tab-pane>
        </a-tabs>
        <a-flex align="center" vertical>
            <a-flex>
                <a-typography-text type="secondary">其它方式登录</a-typography-text>
            </a-flex>
            <a-flex gap="middle">
                <a href="/wechat">
                    <WechatOutlined style="color:darkseagreen" class="icon" />
                </a>
                <a href="/qq">
                    <QqOutlined style="color: skyblue" class="icon" />
                </a>
                <a href="/github">
                    <GithubOutlined style="color:grey" class="icon" />
                </a>
            </a-flex>
        </a-flex>
    </a-modal>
    <PictureVerifyModal ref="pictureVerifyModalRef" />
</template>

<script setup>
import { ref } from 'vue';
import PictureVerifyModal from '@/components/captcha/PictureVerifyModal.vue';
import { useAuthStore } from '@/stores/auth';
import { message } from 'ant-design-vue';
import request from '@/script/utils/request'; // 导入Axios实例
const authStore = useAuthStore();


const pictureVerifyModalRef = ref(null);




const showModal = () => {
    visible.value = true;
};

const handleOk = () => {
    // 处理确认按钮点击事件
};

const handleCancel = () => {
    visible.value = false;
};

const visible = ref(false);
const activeKey = ref('1');
const formState = ref({
    phone: '',
    code: '',
    password: ''
});

const passLogging = ref(false);
const passwordLogin = async (pictureVerify) => {
    passLogging.value = true
    try {
        const requestBody = {
            phone: formState.value.phone,
            password: formState.value.password,
        }
        if (pictureVerify) {
            requestBody.pictureVerify = pictureVerify;
        }
        const response = await request.post('/user/auth/login/password', requestBody);

        //登录成功
        authStore.setTokenName(response.data.tokenName)
        authStore.login(response.data.tokenValue);
        visible.value = false;
    } catch (response) {
        //需要验证码
        if (response.code == 4_006) {
            //请求验证码
            const result = await pictureVerifyModalRef.value.prompt();
            if (result == null) return;
            //再次尝试登录
            await passwordLogin(result);
        }
    } finally {
        passLogging.value = false;
    }
};

const smsCaptchaSending = ref(false);
const sendSmsCaptcha = async () => {
    smsCaptchaSending.value = true;
    try {
        const pictureVerify = await pictureVerifyModalRef.value.prompt();
        if (pictureVerify == null) return;

        const response = await request.post('/captcha/sms', {
            phone: formState.value.phone,
            pictureVerify
        });
        message.success(response.message);
    }  catch (response) {
        
    } finally {
        smsCaptchaSending.value = false;
    }
}

const smsLogging = ref(false);
const smsLogin = async () => {
    smsLogging.value = true;
    try {
        const response = await request.post('/user/auth/login/sms', {
            phone: formState.value.phone,
            code: formState.value.code
        });

        //登录成功
        authStore.setTokenName(response.data.tokenName)
        authStore.login(response.data.tokenValue);
        visible.value = false;
    }  catch (response) {
        
    } finally {
        smsLogging.value = false;
    }
}


defineExpose({
    showModal,
});

</script>

<style scoped>
.icon {
    margin-top: 15px;
    cursor: pointer;
    font-size: 28px;
}
</style>
